<template>
	<view>
		<an-nav-bar title="个人资料"> </an-nav-bar>
		<view class="box">
			<view class="avatar" @click="$refs.refUploadImage.init({canvas:1, width:300, height:300})">
				<image :src="userInfo.photo ?imgUrl+userInfo.photo:'/static/member-avatar.png'" mode=""></image>
				<i></i>
			</view>
			<view class="line flex" @click="gotoUrl('/pages/my/editNickname')">
				<view class="label">昵称</view>
				<view class="cnt  arrow flex">
					<text v-if="userInfo.mobile">{{userInfo.nickName ?userInfo.nickName :userInfo.mobile | geTel}}</text>
				</view>
			</view>
			<!-- <view class="line flex">
				<view class="label">相册</view>
				<view class="cnt  arrow flex">
					<text>0</text>
				</view>
			</view> -->
			<view class="line flex" @click="gotoUrl('/pages/my/editWechatNumber')">
				<view class="label">微信号</view>
				<view class="cnt  arrow flex">
					<text>{{userInfo.wecatAccount ? userInfo.wecatAccount :'未填写'}}</text>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="line flex" @click="selectSex">
				<view class="label">性別</view>
				<view class="cnt  arrow flex">
					<text>{{ userInfo.sex ? userInfo.sex : '保密'}}</text>
				</view>
			</view>
			<view class="line flex">
				<view class="label">年龄</view>
				<picker class="cnt  arrow flex" @change="bindPickerChange" :value="index" :range="ageArray">
					<view style="width: 100%;">{{userInfo.age ? changeAge() :  '请选择'}} </view>
				</picker>
			</view>
		</view>
		
		<!-- 组件 -->
		<UploadImage ref="refUploadImage" @sync="syncUploadImage" />
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	import UploadImage from "@/components/upload/image"
	
	export default {
		components: {
			UploadImage,
		},
		data() {
			return {
				imgUrl: indexConfig.imgUrl,
				userInfo: {},
				index: 0,
				ageArray: [],
			};
		},
		onShow() {
			this.userInfo = this.$mStore.state.userInfo
			this.ageArray = Array.from(Array(100), (v, k) => k)
			this.ageArray.splice(0, 18)
		},
		methods: {
			changeAge() {
				let arr = this.ageArray.findIndex(val => val == this.userInfo.age)
				if (arr != -1) {
					return this.ageArray[arr]
				} else {
					return '未找到年龄段'
				}
			},
			bindPickerChange(e) {
				this.changeUserInfo({
					age: this.ageArray[e.detail.value]
				})
			},
			selectSex() {
				let sexArr = ['男', '女']
				uni.showActionSheet({
					itemList: sexArr,
					success: (res) => {
						this.changeUserInfo({
							sex: sexArr[res.tapIndex]
						})
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			gotoUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			syncUploadImage(url) {
				this.changeUserInfo({
					photo: url
				})
			},
			changeUserInfo(obj) {
				this.$http.put('/app/customer/customer', obj).then(res => {
					this.userInfo = {
						...this.userInfo,
						...obj
					}
					this.$mStore.commit('getUserInfo');
					this.$mHelper.toast('修改成功');
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #fff;
		padding: 0 30rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.avatar {
			margin: 40rpx auto 10rpx;
			width: 180rpx;
			height: 180rpx;
			position: relative;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}

			i {
				position: absolute;
				right: 0;
				bottom: 0;
				display: block;
				width: 34px;
				height: 34px;
				background: url(/static/zhaoxiangji.png) no-repeat;
				background-size: 100% auto;
			}
		}

		.line {
			width: 100%;
			height: 120rpx;
			border-bottom: 2rpx solid #eee;
			color: #333;
			font-size: 30rpx;

			.label {
				flex: 1;
			}

			.cnt {
				color: #666;
			}
		}
	}
</style>
